<template>
  <div>
    <x-header :left-options="{ showBack: false }">公告</x-header>
      <scroller ref="myscroll" :on-refresh="refresh" :on-infinite="infinite" class="scroll-view">
        <ul>
          <li v-for="(item, index) in noticeList" :key="index">
            <router-link :to="{ path:'/noticeDetail',query:{id:item.id} }">
            <div class="top-box">
              <h2>{{item.title}}</h2>
              <div class="top-news-text">
                <p v-if="item.oANotifyType">
                  <label>类型：</label>
                <span>{{item.oANotifyType.typeName}}</span>
                </p>
                <p>
                  <label>时间：</label>
                <span>{{item.createTime}}</span>
                 </p>
                </div>
            </div>
            <div class="bottom-box">
              <span>{{item.visitNum}} 阅读</span>
              <i class="bottom-spot">·</i>
              <span>{{item.commentsCount}} 评论</span>
            </div>
            </router-link>
          </li>
        </ul>
      </scroller>
  </div>
</template>

<script>
import Vue from "vue";
import { Swiper, SwiperItem } from "vux";
import VueScroller from "vue-scroller";
Vue.use(VueScroller);
export default {
  name: "newsList",
  components: {
    Swiper,
    SwiperItem
  },
  data() {
    return {
      offset: 0,
      limit: 10,
      total: 0,
      noticeList: [],
      isLoading: true
    };
  },
  mounted() {
    this.$refs.myscroll.finishInfinite(true);
    this.getData();
  },
  methods: {
    refresh() {
      //下拉刷新
      this.offset = 0;
      this.noticeList = [];
      this.getData();
      this.isLoading = false;
    },
    infinite() {
      //上拉刷新
      if (this.isLoading) {
        this.offset++;
        this.getData();
      }
    },
    getData() {
      let defer = this.baseService.postForm(
        this.__ctx + "/oa/oANotify/queryCustomerNotify",
        { offset: this.offset, limit: this.limit }
      );
      defer
        .then(data => {
          this.isLoading = true;
          this.$refs.myscroll.finishPullToRefresh();
          let { isOk, total, rows, page } = data;
          if (isOk) {
            this.total = total;
            if (page > 1) {
              this.noticeList = [...this.noticeList, ...rows];
            } else {
              this.noticeList = rows;
            }
            if (this.noticeList.length == total) {
              this.$refs.myscroll.finishInfinite(true);
            }
          } else {
            this.$refs.myscroll.finishInfinite(true);
            this.$vux.toast.show({
              type: "warn",
              text: data.msg
            });
          }
        })
        .catch(err => {
          this.$refs.myscroll.finishInfinite(true);
        });
    }
  }
};
</script>

<style scoped lang="less">
.scroll-view {
  top: 46px;
  background-color: #f8f8f9;
  ul {
    padding: 13px 15px 0 15px;
    li {
      background-color: #fff;
      border-radius: 5px;
      border: 1px solid #dcdee2;
      margin-bottom: 13px;
      .top-box {
        border-bottom: 1px solid #dcdee2;
        padding: 15px;
        h2 {
          font-size: 1.7em;
          line-height: 1.7em;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-bottom: 5px;
          color: #17233d;
        }
        .top-news-text {
          font-size: 1.2em;
          padding: 10px 0 0 5px;
          p {
            margin-bottom: 5px;
            label {
              color: #808695;
            }
            span {
              color: #515a6e;
            }
          }
        }
      }
      .bottom-box {
        height: 4em;
        line-height: 4em;
        padding-left: 15px;
        font-size: 1.1em;
        color: #808695;
        .bottom-spot {
          margin: 0 5px;
        }
      }
    }
  }
}
</style>
